import React from 'react';
import PropTypes from 'prop-types'
import './index.scss';

// 面包屑导航
import Breadcrumbs from '../../components/breadcrumbs/index';

// fetch请求函数
import getArcList from '../../request/get_arc_list';
import getArcCount from '../../request/get_arc_count';
// 分页组件
import Pagination from '../../components/pagination/index';

import ListItem from './list_item';
// 图片查看model
import PicModel from '../pic_model/idnex';
import { imgHost } from '../../util/costant';
// 我的相册列表
class ListPicContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      listPic: [],
      totalCount: 0,
      page: 1,
      perPage: this.props.perPage,
      showModel: false,
      modelData: '',
    }
    this.changePage = this.changePage.bind(this)
    this.hideModel = this.hideModel.bind(this)
    this.handleImgClick = this.handleImgClick.bind(this)
  }
  componentDidMount() {
    // 请求文章列表和请求文章个数同时完成
    Promise.all([this.getListKeLi(1), this.getTotalCount(this.props.cateId)]).then((res) => {
      this.setState({
        listPic: res[0].data,
        totalCount: res[1].data[0].count,
      })
    })
  }
  // 请求文章列表，返回一个Promise
  getList(page, perPage, CateId) {
    const params = {
      page,
      per_page: perPage || 10,
      categories: CateId,
    }
    const result = getArcList(params);
    return result;
  }
  // 请求文章数量，返回一个Promise
  getTotalCount(cateId) {
    const params = {
      include: cateId,
    }
    const result = getArcCount(params);
    return result;
  }
  // 柯里化请求文章列表，减少参数
  getListKeLi(page) {
    const result = this.getList(page, this.state.perPage, this.props.cateId);
    return result;
  }
  // 点击分页列表的回调
  changePage(current) {
    this.setState({
      page: current,
      listPic: [],
    })
    this.getListKeLi(current).then((res) => {
      this.setState({
        page: current,
        listPic: res,
      })
    })
  }
  // 点击每个缩略图显示图片查看界面
  handleImgClick(data) {
    this.setState({
      showModel: true,
      modelData: data,
    })
  }
  // 隐藏图片查看界面
  hideModel() {
    if (!this.state.showModel) { return }
    this.setState({
      showModel: false,
      modelData: '',
    })
  }
  render() {
    const totalPage = this.state.totalCount / this.state.perPage;
    return (
      <div id="list-pic-container">
        {this.state.listPic.length && this.state.showModel ? <PicModel data={this.state.modelData} handleClose={this.hideModel} /> : ''}
        <div className="w">
          <div className="container">
            <Breadcrumbs currentTitle="个人相册" />
            <ul className="list-pic">
              {this.state.listPic.length ? this.state.listPic.map((item) => {
                const data = Object.assign({}, item, { litpic: imgHost + item.litpic[0][0].split(',')[0] })
                return (
                  <ListItem data={data} key={item.id} itemClick={this.handleImgClick} />
                )
              }) :
              <div className="loading">加载中...</div>
              }
            </ul>
            <div className="pagination">
              { // 页数大于1显示分页
                totalPage > 1 ?
                  <Pagination
                    total={this.state.totalCount}
                    pageSize={this.state.perPage}
                    current={this.state.page}
                    onChange={this.changePage}
                  />
                  :
                  ''
              }
            </div>
          </div>
        </div>
      </div>
    )
  }
}
export default ListPicContainer;
ListPicContainer.propTypes = {
  perPage: PropTypes.number,
  cateId: PropTypes.number,
}
